<template>
	<view class="pages">
		<!-- 头部 -->
		<page_head>选择车辆</page_head>
		
		<!-- 主体 -->
		<view class="index_main">
			<!-- 类型选择 -->
			<view class="typeTab">
				<view class="typeTab-box">
					<!-- <view class="typeTab-item typeTab-item1" @click="checkType(0)">
						<span class="typeTab-title">综合排序</span>
						<image class="typeTab-img" :src="isAll == true ? IMAGE_STATIC+'/images/top-style.png' : IMAGE_STATIC+'/images/top.png'" mode=""></image>
					</view> -->
					<view class="typeTab-item typeTab-item2" @click="checkType(1)">
						<span class="typeTab-title typeTab-title--1">{{ brand ? brand : '品牌' }}/{{ series ? series : '车系' }}</span>
						<image class="typeTab-img" :src="isType == true ? IMAGE_STATIC+'/images/top-style.png' : IMAGE_STATIC+'/images/top.png'" mode=""></image>
					</view>
					<view class="typeTab-item typeTab-item3" @click="checkRentOrder()">
						<span class="typeTab-title">租金</span>
						<image class="typeTab-img" :src="isPrice == true ? IMAGE_STATIC+'/images/top-style.png' : IMAGE_STATIC+'/images/top.png'" mode=""></image>
					</view>
				</view>
				<!-- 租金 -->
				<view class="model" v-if="priceModel">
					<view class="model-box">
						<view class="model-wrapper">
								<view class="model-itemList">
									<view class="model-itembox" @click="getRentOrder(1)">价格从低到高</view>
									<view class="model-itembox" @click="getRentOrder(2)">价格从高到低</view>
								</view>
						</view>
					</view>
				</view>
				<!-- 品牌/车系弹框 -->
				<view class="model" v-if="showModel">
					<view class="model-box">
						<view class="model-wrapper">
								<view class="model-typeList">
									<view class="model-tabItem">
										<view class="model-item" :class="[active == index ? 'model-item--active' : '']" v-for="(item,index) in brandList" :key="index" @click="checkActive(index,item.brandId)">
											<span class="check" :class="[active == index ? 'active' : '']"></span>
											<view class="kuan"></view>
											<view class="name">{{ item.brandName }}</view>
										</view>
									</view>
									<view class="initNoData" v-if="carModelList.length == 0">暂无数据~</view>
									<view class="model-list" v-else>
										<view class="label" :class="[activeName == index ? 'label--active' : '']"  v-for="(item,index) in carModelList" :key="index"  @click="checkModelName(index,item)">{{ item }}</view>
									</view>
								</view>
								<!-- 按钮 -->
								<view class="model-btn">
									<view class="model-close" @click="empty()">清空</view>
									<view class="model-confirm" @click="confirm()">确认</view>
								</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="typeList">
				<view class="typeList-box">
					<view class="initNoData" v-if="selectCarList.length == 0">暂无数据~</view>
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower" v-else>
					<view class="typeList-item" v-for="(item,index) in selectCarList" :key="index" 
					@tap="goTo(item)" >
						<view class="typeList-top">
							<image class="typeList-goods" :src="IMAGE_PREFIX +'/'+ item.picture.split(',')[0]" mode=""></image>
							<view class="typeList-titlebox">
								<view class="title">{{ item.modelName }}</view>
								<view class="tips">
									<span class="type">{{ item.energyType == 1 ? '油车' : '新能源车' }}</span>
									<view class="type" v-for="(i,j) in getSlicing(item.title)" :key="j" v-if="i != ''">{{ i }}</view>
								</view>
							</view>
						</view>
						<view class="typeList-bottom">
							<view class="typeList-details">
								<view class="details">车辆详情</view>
								<image class="seeDetails" :src="IMAGE_STATIC+'/images/seeDetails.png'" mode=""></image>
							</view>
							<view class="typeList-details">
								<view class="details">空闲车辆</view>
								<view class="details"> {{ item.idleCarCnt }}</view>
							</view>
							<view class="typeList-pricebox" v-if="rentTimeType == 1">
								<view class="price"><span class="symbol">￥</span>{{ item.dayPrice }}</view><view class="priceTitle">/天</view>
							</view>	
							<view class="typeList-pricebox" v-if="rentTimeType == 2">
								<view class="price"><span class="symbol">￥</span>{{ item.oneMonthPrice }}</view><view class="priceTitle">/{{ rentTimeType-1 }}月</view>
							</view>	
							<view class="typeList-pricebox" v-if="rentTimeType == 3">
								<view class="price"><span class="symbol">￥</span>{{ item.twoMonthPrice }}</view><view class="priceTitle">/{{ rentTimeType-1}}月</view>
							</view>	
							<view class="typeList-pricebox" v-if="rentTimeType == 4">
								<view class="price"><span class="symbol">￥</span>{{ item.threeMonthPrice }}</view><view class="priceTitle">/{{ rentTimeType-1 }}月</view>
							</view>	
						</view>
					</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import page_head from '@/components/page_head.vue'
	export default {
		components:{
			page_head
		},
		data(){
			return{
				IMAGE_STATIC: this.$url.assetsPath,
				IMAGE_PREFIX: this.$url.urlPath,
				isAll: true,
				isType: false,
				isPrice: false,
				showModel: false,
				priceModel: false,
				active: 0,
				activeName: 0,
				brandList: [],
				brandId: 0,
				carModelList: [],
				pageIndex: 1,
				pageSize: 10,
				// rentTimeType: 1, // 1-日租 2-1月租 3-2月租 4-3月租
				selectCarList: [],
				rentOrder: 1, // 1.租金升序 2.租金降序
				day: 0,
				modelName: '',
				brand: '品牌',
				series: '车系',
			}
		},
		onLoad(options) {
			if(options){
				this.outletId = options.value1;
				this.selectedCity = options.value2;
				this.day = Number(options.value3);
				this.beginTime = options.value4;
				this.oneTimeTitle = options.value5;
				this.endTime = options.value6;
				this.twoTimeTitle = options.value7;
			}
		},
		computed: {
			rentTimeType(){
				let that = this;
				if(that.day === 30){
					return 2;
				}else if(that.day === 60){
					return 3;
				}else if(that.day === 90){
					return 4;
				}else{
					return 1;
				}
			},
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.pageIndex = 1;
				this.selectCarList = [];
				this.getSelectCarList();
			},
			goTo(item){
				let that = this;
				if(item.idleCarCnt  == 0){
					that.$tools.toast("暂无空闲车辆");
				}else{
					console.log("that.rentTimeType：",that.rentTimeType);
					that.$tools.jump('/pages/details/details',that.outletId,that.selectedCity,that.day,that.beginTime,that.oneTimeTitle,that.endTime,that.twoTimeTitle,item.modelId,that.rentTimeType)
				}
			},
			// 选择车型列表
			getSelectCarList(){
				let that = this;
				console.log("that.modelName:",that.modelName);
				that.$Ajax('/car/selectCarList',{
					pageIndex: that.pageIndex,
					pageSize: that.pageSize,
					outletId: that.outletId,   // 网点id
					rentOrder: that.rentOrder,   //1.租金升序 2.租金降序    
					brandId: that.brandId,  // 品牌 Id
					modelName: that.modelName,  //车型名称
					rentTimeType: that.rentTimeType   // 1-日租 2-1月租 3-2月租 4-3月租
				},res => {
					if (res.code == 200) {
						that.pages = res.data.pages;
						that.selectCarList = that.selectCarList.concat(res.data.list);
					}
				},err =>{},'GET')
			},
			// 查询品牌下的车型列表
			getCarModelList(){
				let that = this;
				that.$Ajax('/car/carModelList',{
					brandId: that.brandId,
				},res => {
					if (res.code == 200) {
						that.carModelList = res.data;
						that.modelName = that.carModelList[0];
						this.series = that.modelName;
					}
				},err =>{},'GET')
			},
			// 查询品牌列表
			getBrandList(){
				let that = this;
				that.$Ajax('/car/brandList',{},res => {
					if (res.code == 200) {
						that.brandList = res.data;
						this.brandId = this.brandList[this.active].brandId;
						this.brand = that.brandList[this.active].brandName;
						this.getCarModelList();   // 车系
					}
				},err =>{},'GET')
			},
			// 清空
			empty(){
				this.active = 0;
				this.brandId = 0;
				this.modelName = '';
				this.pageIndex = 1;
				this.selectCarList = [];
				this.showModel = false;
				this.brand = "品牌";
				this.series = "车系";
				this.getSelectCarList();
			},
			// 确认
			confirm(){
				this.pageIndex = 1;
				this.selectCarList = [];
				this.getSelectCarList();
				this.showModel = false;
				this.isType = false;
			},
			// 切换品牌
			checkActive(index,brandId){
				if(this.active != index){
					this.active = index;
				}
				this.brandId = this.brandList[this.active].brandId;
				this.brand = this.brandList[this.active].brandName;
				this.getCarModelList();
			},
			// 切换车系
			checkModelName(index,name){
				if(this.activeName != index){
					this.activeName = index;
				}
				this.modelName = name;
				this.series = this.modelName;
				this.getSelectCarList();
			},
			// 价格
			getRentOrder(index){
				this.rentOrder = index;
				this.priceModel = false;
				this.pageIndex = 1;
				this.selectCarList = [];
				this.getSelectCarList();
				this.showModel = false;
				this.isPrice = false;
			},
			// 租金弹框
			checkRentOrder(){
				this.pageIndex = 1;
				this.selectCarList = [];
				this.priceModel = !this.priceModel;
				this.isPrice =  !this.isPrice;
			},
			checkType(index){
				if(index == 1){
					this.isType = !this.isType;
					this.isAll = false;
					this.showModel = !this.showModel;
					this.priceModel = false;
					this.isPrice = false;
					if(this.showModel == true){
						this.carModelList = [];
						this.getBrandList();
					}
				}else if(index == 2){
					this.isAll = false;
					this.isType = false;
				}
			},
			lower(e) {
				console.log("ddd")
				if (this.pageIndex >= this.pages) {
					return this.$tools.toast('到底了');
				} else {
					this.pageIndex++;
					console.log("+++")
					this.getSelectCarList();
				}
			},
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.typeTab{
		background: $globalColor-white;
		position: fixed;
		z-index: 2;
		width: 100%;
		&-box{
			width: 100%;
			@include flexBetween;
			padding: 60rpx 30rpx 30rpx;
		}
		&-item{
			@include flexCenter;
			width: 33.33%;
		}
		&-item1{
			@include flexLeft;
		}
		&-item2{
			@include flexCenter;
		}
		&-item3{
			@include flexRight;
		}
		&-title{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $globalColor-fontStyle;
			&--1{
				white-space: nowrap;
				@include initMoreLine(1);
				min-width: 100rpx;
				max-width: 200rpx;
			}
		}
		&-img{
			width: 20rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}
	.typeList{
		padding-top: 120rpx;
		&-box{
			@include flexCenterColumn;
		}
		&-item{
			@include flexLeftColumn;
			background: $globalColor-white;
			margin: 20rpx 30rpx 0;
			padding: 30rpx 30rpx 35rpx 30rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
		}
		&-top{
			width: 100%;
			@include flexLeft;
			margin: 23rpx 0 30rpx;
		}
		&-goods{
			width: 240rpx;
			height: 150rpx;
			margin-right: 20rpx;
		}
		&-titlebox{
			@include flexLeftColumn;
			.title{
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: $globalColor-fontStyle;
				@include initMoreLine(2);
				width: 380rpx;
			}
			.tips{
				@include flexLeft;
				.type{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin: 10rpx 10rpx 0 0;
					padding-right: 10rpx;
					border-right: 1px solid #E5E5E5;
					white-space: nowrap;
				}
				& .type:nth-last-child(1){
					border-right: none;
				}
			}
		}
		&-bottom{
			width: 100%;
			@include flexBetween;
		}
		&-details{
			// width: 33.33%;
			@include flexLeft;
			background: #F9F9FB;
			border-radius: 2rpx 2rpx 2rpx 2rpx;
			border: 1px solid #EFEFEF;
			padding: 6rpx 17rpx;
			.details{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #757577;
				margin-right: 10rpx;
			}
			.seeDetails{
				width: 20rpx;
				height: 20rpx;
			}
		}
		&-pricebox{
			@include flexRight;
			white-space: nowrap;
			.price{
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #F3354C;
				.symbol{
					font-size: 24rpx;
				}
			}
			.priceTitle{
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: $globalColor-fontStyle;
			}
			
		}
	}
	
	// 弹框
	.model{
		width: 100vw;
		height: 100vh;
		position: relative;
		&-box{
			width: 100vw;
			height: calc(100vh - 180rpx);
			background: rgba(0, 0, 0, .5);
			position: fixed;
			// top: 0;
		}
		&-wrapper{
		}
		&-itemList{
			background: $globalColor-white;
			@include flexCenterColumn;
		}
		&-itembox{
			padding: 30rpx 0 20rpx;
			width: 100%;
			text-align: center;
		}
		&-typeList{
			background: $globalColor-white;
			@include flexLeft;
			align-items: flex-start;
		}
		&-tabItem{
			background: #F6F6F6;
			@include flexLeftColumn;
			justify-content: flex-start;
			width: 35%;
			// width: 100%;
			height: calc(100vh - 50vh);
			overflow: scroll;
			&::-webkit-scrollbar
			{
				width: 0rpx !important;
				height: 0rpx !important;
				background-color: transparent;
			}
			/*定义滚动条轨道 内阴影+圆角*/
			&::-webkit-scrollbar-track
			{
				-webkit-box-shadow: inset 0 0 6rpx rgba(0,0,0,0.3);
				border-radius: 10rpx;
				background-color: transparent;
			}
			/*定义滑块 内阴影+圆角*/
			&::-webkit-scrollbar-thumb
			{
				border-radius: 10rpx;
				-webkit-box-shadow: inset 0 0 6rpx rgba(0,0,0,.3);
				background-color: transparent;
			}
		}
		&-item{
			@include flexLeft;
			width: 100%;
			padding: 30rpx 0;
			&--active{
				background: #ffffff;
			}
			.check{
				width: 10rpx;
				height: 44rpx;
				background: transparent;
			}
			.active{
				width: 10rpx;
				height: 44rpx;
				background: $globalColor-styleActive;
			}
			.kuan{
				width: 10rpx;
				height: 10rpx;
				background: $globalColor-white;
				// border: 1px solid #707070;
				margin: 0 24rpx;
			}
			.name{
				font-size: 26rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: $globalColor-fontStyle;
			}
		}
		&-list{
			@include flexLeftColumn;
			justify-content: flex-start;
			// margin-top: 30rpx;
			padding: 30rpx  0 0 0;
			height: calc(100vh - 50vh);
			overflow: auto;
			width: 62%;
			background: #ffffff;
			&::-webkit-scrollbar
			{
				width: 0rpx !important;
				height: 0rpx !important;
				background-color: transparent;
			}
			.label{
				font-size: 26rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: $globalColor-fontStyle;
				margin: 0 0 60rpx;
				white-space: nowrap;
				padding-left: 30rpx;
				border-left: 10rpx solid transparent;
				width: 440rpx;
				&--active{
						border-left: 10rpx solid $globalColor-styleActive;
				}
			}
		}
		&-btn{
			@include flexBetween;
			background: $globalColor-white;
			border-radius: 0rpx 0rpx 30rpx 30rpx;
			padding: 20rpx 30rpx 27rpx;
		}
		&-close{
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: $globalColor-fontStyle;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #707070;
			padding: 18rpx 0;
			text-align: center;
			width: 25%;
		}
		&-confirm{
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: $globalColor-fontStyle;
			background: #AD2926;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #AD2926;
			padding: 18rpx 0;
			text-align: center;
			width: 70%;
		}
	}
	.initNoData{
		padding:  0 !important;
	}
	.scroll-Y{
		height: calc(100vh - 250rpx);
		padding-bottom: 50rpx;
	}
	.index_main{
		padding-bottom: 0;
	}
</style>